<div v-bind:class="[componentId]">
	<cly-header>
		<template v-slot:header-left>
			<h2> {{i18n('events.all.title.new')}} </h2>
		<cly-tooltip-icon :tooltip="i18n('events.all.title.tooltip')" class="cly-vue-events-header--tooltip" icon="ion-help-circled"></cly-tooltip-icon>
		</template>
		<template v-slot:header-right>
			<cly-more-options v-if="topDropdown" size="small">
			  <el-dropdown-item :key="idx" v-for="(item, idx) in topDropdown">
				<!--<span :class="item.icon"></span>-->	
				<a :href="item.value" class="bu-ml-1">{{item.label}}</a>
			  </el-dropdown-item>
			</cly-more-options>
		</template>
	</cly-header>
	<cly-main class="bu-pt-4">
	  <div class="bu-columns bu-is-gapless">
		<div class="bu-column white-bg bu-is-3 bu-mr-5" style="max-height:681px">
		  <cly-listbox
			skin="jumbo"
			height="624"
			:searchPlaceholder="searchPlaceholder"
			:options="allEvents"
			:searchable="true"
			expandOnHover
			v-model="selectedEventFromSearchBar">
			<template v-slot:option-suffix="option">
			  <span class="cly-vue-events-group" v-if="option.custom.value">{{option.custom.value}}</span>				
			</template>
		  </cly-listbox>
		</div>
		<div class="bu-column bu-is-9">
			<div class="bu-mr-5 cly-vue-events-alerts" v-for="item in limitAlerts" :key="item" :value="item">
		    	<cly-notification v-if="item.show" class="bu-mb-5 cly-vue-events-all__alerts" :text="item.message" color="light-warning">
				</cly-notification>
			</div>
		  <div class="cly-vue-events-all" v-if="!groupData.isGroup">
			{{decode(selectedEventName)}}<span v-if="category!=''" class="cly-vue-events-group bu-ml-4">{{decode(category)}}</span>
		  </div>
		  <div class="cly-vue-events-all" v-else>
			{{decode(groupData.name)}}<span class="cly-vue-events-group bu-ml-4">{{i18n('events.all.group')}}</span>
		  </div>
		  <div  class="cly-vue-events-all__subheading bu-pt-3" v-if="groupData.isGroup && groupData.description" v-html="groupData.description"></div>
		  <div  class="cly-vue-events-all__subheading bu-pt-3" v-if="!groupData.isGroup && eventDescription" v-html="eventDescription"></div>
		  <div class="bu-is-flex cly-vue-events-all--padding">
			<div class="bu-is-align-items-center bu-is-flex" v-if="hasSegments">
			  <span class="bu-is-flex cly-vue-events-all-placeholder-text bu-pr-2">{{i18n('events.all.segmentation')}}</span>
			  	<cly-select-x
					search-placeholder="Search segments"
					:options="availableSegments"
					:searchable="true"
					v-model="selectedSegment"
					showSearch
					class="cly-vue-events-all--margin"
				>
					<template v-slot:selectList="listScope" v-if="omittedSegments.options.length">
						<div class="cly-vue-events-omitted-segments bu-ml-1" v-if="listScope.searchQuery == ''">
							<div class="cly-vue-events-omitted-segments__title">
								{{omittedSegments.label}}
							</div>
							<div class="cly-vue-events-omitted-segments__item" v-for="item in omittedSegments.options">
								{{item.label}}
							</div>
						</div>
					</template>
				</cly-select-x>
			</div>
			<div class="bu-is-align-items-center bu-is-flex">
			  <span class="cly-vue-events-all-placeholder-text bu-pr-2">{{i18n('events.all.period')}}</span>
			  <cly-date-picker-g class="cly-vue-events-all-date-picker"></cly-date-picker-g>
			</div>
		  </div>
		  <div  class="color-cool-gray-100 font-weight-normal text-medium bu-pt-4" v-if="segmentDescription!=''" v-html="segmentDescription"></div>
		  <cly-section class="bu-mt-5 bu-mr-5">
			<cly-chart-bar v-if="currentActiveSegmentation !== 'segment'" :option="barData" :legend="lineLegend" :force-loading="isChartLoading" v-loading="isChartLoading">	
			</cly-chart-bar>
			<cly-chart-time v-else  :option="chartData" :legend="lineLegend" :force-loading="isChartLoading" v-loading="isChartLoading" :category="graphNotesCategory"></cly-chart-time>
		  </cly-section>
		  <cly-section class="bu-mt-5 bu-mr-5">
			<detail-tables></detail-tables>
		  </cly-section>
		</div>
	  </div>
	</cly-main>
  </div>